<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
        .map {
            width: 100%;
            background: white !important;
            height: 100%;
            margin: 0px;
        }
    </style>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            background: white;
            height: 100%;
            margin: 0;
            width: 100%;
        }

        .bigDiv {
            width: 1160px;
            margin: -200px auto 84px;
            z-index: 999;
            background: #fff;
            border-radius: 3px;
            font-weight: 300;
            -webkit-box-shadow: 0 0 3px 0 rgb(0 0 0 / 9%);
            box-shadow: 0 0 3px 0 rgb(0 0 0 / 9%);
        }

        .network {
            position: relative;
        }

        .map {
            height: 610px;
            overflow: hidden;
            position: relative;
            background: #f2f5fa;
            background-size: 82px 43px;
        }

        .one {
            height: 209px;
            text-align: center;
            position: relative;
        }

        header {
            min-width: 1260px;
            height: 390px;
            background: #49a8f5;
        }

        .div {
            margin: 0 auto;
            width: 1160px;
            height: 60px;
            /* background-color: #585858; */
            line-height: 60px;
        }

        .logo {
            width: 307px;
            height: 42px;
            font-size: 25px;
            /* display: block; */
            text-indent: -99999px;
            padding: 15px 0;
            background: url(/public/dist/logo.cd6d05.png) no-repeat 0 center;
            background-size: 307px 42px;
            color: #fff;
            text-decoration: none;
        }

        .an {
            width: 1160px;
            height: 60px;
            /* background-color: #585858; */
            text-align: center;
            margin: auto;
            margin-top: 60px;
        }

        .an span {
            width: 170px;
            height: 50px;
            font-size: 26px;
            font-weight: 300;
            line-height: 50px;
            text-align: center;
            position: relative;
            text-decoration: none;
            display: inline-block;
            -webkit-transition: .2s;
            transition: .2s;
            color: rgba(255, 255, 255, 0.72);
            background: rgba(255, 255, 255, 0.11);
            margin: auto;
        }

        .an span:hover,
        .an span.router-link-active {
            color: #fff;
            background: rgba(255, 255, 255, 0.29);
        }

        .table thead th:first-child {
            width: 33.33%;
        }

        .table th {
            height: 36px;
            text-align: center;
            line-height: 36px;
            color: #fff;
            font-size: 14px;
            font-weight: normal;
            background: rgba(73, 168, 245, 0.75);
        }

        .table td {
            text-align: center;
        }

        .status_item {
            width: 230px;
            display: inline-block;
            text-align: center;
            vertical-align: top;
            margin: 50px 0 0 0;
        }

        .status_circle {
            width: 99px;
            height: 99px;
            line-height: 99px;
            color: #fff;
            font-size: 30px;
            display: block;
            margin: 0 auto;
            position: relative;
            border-radius: 50%;
            border: 1px solid #e0e0e0;
            background: #30c7fb;
            -webkit-box-shadow: 0 0 0 4px #fff inset;
            box-shadow: 0 0 0 4px #fff inset;
        }

        .scan {
            width: 100px;
            height: 100px;
            display: block;
            top: 0;
            bottom: 0;
            position: absolute;
            background: url(/public/dist/scan.7e8005.png) no-repeat center center;
            /* transform: rotate(180deg); */
            -webkit-animation: scan 2s linear infinite;
            animation: scan 2s linear infinite;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        .core {
            position: relative;
            z-index: 2;
        }

        small {
            font-size: 14px;
        }

        p {
            font-size: 14px;
            color: #585858;
            margin-top: 9px;
        }
        .container{
            width: 100%;
            height: 100%;
        }
    </style>
    <title>简易行政区地图标注</title>
</head>

<body>
    <header>
        <div class="div">
            <a href="" class="logo">高德开放平台</a>
        </div>
        <div class="an">
            <span class="">服务健康状态</span>
            <span class="router-link-exact-active router-link-active">链路健康状态</span>
        </div>
    </header>

    <div class="bigDiv">
        <div class="network">
            <div class="one">
                <div class="status_item">
                    <span class="status_circle">
                        <span class="scan"></span>
                        <span class="core"><span id="monitoring"></span> <small
                                style="font-size: 14px;">个</small></span>
                    </span>
                    <p>监测点</p>
                </div>
                <div class="status_item">
                    <span class="status_circle" style="background:#89dfb3">
                        <span class="scan"></span>
                        <span class="core"><span class="first"></span> <small style="font-size: 14px;">ms</small></span>
                    </span>
                    <p>
                        <span class="max_min" style="color: #89dfb3;">最快</span>
                        <span id="Fastest"></span>
                    </p>
                </div>
                <div class="status_item">
                    <span class="status_circle" style="background-color: #fd7e7d;">
                        <span class="scan"></span>
                        <span class="core"><span class="last"></span> <small style="font-size: 14px;">ms</small></span>
                    </span>
                    <p>
                        <span class="max_min" style="color: #fd7e7d;">最慢</span>
                        <span id="Slowest"></span>
                    </p>
                </div>
                <div class="status_item">
                    <span class="status_circle" style="background:#86e9aa">
                        <span class="scan"></span>
                        <span class="core"><span id="average"></span> <small style="font-size: 14px;">ms</small></span>
                    </span>
                    <p>平均</p>
                </div>
            </div>
            <div id="container" class="map" tabindex="0"></div>

        </div>

    </div>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <script language="javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=66d4a9f6818ad73625a29c9ce3170196&plugin=AMap.Scale,AMap.ToolBar"></script>
    <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/data/china-pp.js"></script>
    <!-- jquery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
    <script src="./echarts.js"></script>
    <script src="./china.js"></script>

    <!-- 高德地图 -->
    <!-- <script type="text/javascript">
        var SOC = 'CHN'
        var colors = {};
        var GDPSpeed = {
            '#7f1100': 10,//贵州
            '540000': 10,//西藏
            '530000': 8.5,//云南 
            '500000': 8.5,//重庆
            '360000': 8.5,//江西
            '340000': 8.0,//安徽
            '510000': 7.5,//四川
            '350000': 8.5,//福建
            '430000': 8.0,//湖南
            '420000': 7.5, //湖北
            '410000': 7.5,//河南
            '330000': 7.0,//浙江
            '640000': 7.5,//宁夏
            '650000': 7.0,//新疆
            '440000': 7.0,//广东
            '370000': 7.0,//山东
            '450000': 7.3,//广西
            '630000': 7.0,//青海
            '320000': 7.0,//江苏
            '140000': 6.5,//山西
            '460000': 7,// 海南
            '310000': 6.5,//上海
            '110000': 6.5, // 北京
            '130000': 6.5, // 河北
            '230000': 6, // 黑龙江
            '220000': 6,// 吉林
            '210000': 6.5, //辽宁
            '150000': 6.5,//内蒙古
            '120000': 5,// 天津
            '620000': 6,// 甘肃
            '610000': 8.5,// 甘肃
            '710000': 2.64, //台湾
            '810000': 3.0, //香港
            '820000': 4.7 //澳门

        }
        var getColorByDGP = function (adcode) {
            if (!colors[adcode]) {
                var gdp = GDPSpeed[adcode];
                if (!gdp) {
                    colors[adcode] = 'rgb(227,227,227)'
                } else {
                    var r = 3;
                    var g = 140;
                    var b = 230;
                    var a = gdp / 10;
                    colors[adcode] = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
                }
            }
            return colors[adcode]
        }

        var disCountry = new AMap.DistrictLayer.Country({
            zIndex: 10,
            SOC: 'CHN',
            depth: 1,
            styles: {
                'nation-stroke': '#ff0000',
                'coastline-stroke': '#0088ff',
                'province-stroke': 'grey',
                'fill': function (props) {
                    return getColorByDGP(props.adcode_pro)
                }
            }
        })

        var map = new AMap.Map("container", {
            zooms: [4, 8],
            center: [106.122082, 33.719192],
            zoom: 4,
            isHotspot: false,
            defaultCursor: 'pointer',
            layers: [
                disCountry
            ],
            viewMode: '3D',
        })
        map.addControl(new AMap.Scale());
        map.addControl(new AMap.ToolBar({ liteStyle: true }));
        map.on('complete', function () {
            var layer = new AMap.LabelsLayer({
                // 开启标注避让，默认为开启，v1.4.15 新增属性
                collision: false,
                // 开启标注淡入动画，默认为开启，v1.4.15 新增属性
                animation: true,
            });
            for (var i = 0; i < LabelsData.length; i++) {
                var labelsMarker = new AMap.LabelMarker(LabelsData[i]);
                layer.add(labelsMarker);
            }
            map.add(layer);
        })

        document.getElementsByClassName('amap-mcode')[0].innerHTML = '-GS(2021)648号'
    </script> -->




    <!-- ECharts地图 -->
    <script type="text/javascript">
        function randomData() {
            return Math.round(Math.random() * 1000);
        }
        let option = {
            tooltip: {
                triggerOn: "mousemove", //mousemove、click
                padding: 8,
                borderWidth: 1,
                borderColor: '#409eff',
                backgroundColor: 'rgba(255,255,255,0.7)',
                textStyle: {
                    color: '#000000',
                    fontSize: 13
                },
                formatter: function (e, t, n) {
                    let data = e.data;
                    //模拟数据
                    data.specialImportant = Math.random() * 1000 | 0;
                    data.import = Math.random() * 1000 | 0;
                    data.compare = Math.random() * 1000 | 0;
                    data.common = Math.random() * 1000 | 0;
                    data.specail = Math.random() * 1000 | 0;

                    let context = `
           <div>
               <p><b style="font-size:15px;">${data.name}</b>(2020年第一季度)</p>
               <p class="tooltip_style"><span class="tooltip_left">事件总数</span><span class="tooltip_right">${data.value}</span></p>
               <p class="tooltip_style"><span class="tooltip_left">特别重大事件</span><span class="tooltip_right">${data.specialImportant}</span></p>
               <p class="tooltip_style"><span class="tooltip_left">重大事件</span><span class="tooltip_right">${data.import}</span></p>
               <p class="tooltip_style"><span class="tooltip_left">较大事件</span><span class="tooltip_right">${data.compare}</span></p>
               <p class="tooltip_style"><span class="tooltip_left">一般事件</span><span class="tooltip_right">${data.common}</span></p>
               <p class="tooltip_style"><span class="tooltip_left">特写事件</span><span class="tooltip_right">${data.specail}</span></p>
           </div>
        `
                    return context;
                }
            },
            visualMap: {
                show: true,
                left: 26,
                bottom: 40,
                showLabel: true,
                pieces: [{
                    gte: 100,
                    label: ">= 1000",
                    color: "#1f307b"
                },
                {
                    gte: 500,
                    lt: 999,
                    label: "500 - 999",
                    color: "#3c57ce"
                },
                {
                    gte: 100,
                    lt: 499,
                    label: "100 - 499",
                    color: "#6f83db"
                },
                {
                    gte: 10,
                    lt: 99,
                    label: "10 - 99",
                    color: "#9face7"
                },
                {
                    lt: 10,
                    label: '<10',
                    color: "#bcc5ee"
                }
                ]
            },
            geo: {
                map: "china",
                scaleLimit: {
                    min: 1,
                    max: 2
                },
                zoom: 1,
                top: 120,
                label: {
                    normal: {
                        show: true,
                        fontSize: "18",
                        color: "green"
                    }
                },
                itemStyle: {
                    normal: {
                        //shadowBlur: 50,
                        //shadowColor: 'rgba(0, 0, 0, 0.2)',
                        borderColor: "rgba(0, 0, 0, 0.2)"
                    },
                    emphasis: {
                        areaColor: "#f2d5ad",
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        borderWidth: 0
                    }
                }
            },
            series: [{
                name: "突发事件",
                type: "map",
                geoIndex: 0,
                data: [{
                    name: "南海诸岛",
                    value: 100,
                    eventTotal: 100,
                    specialImportant: 10,
                    import: 10,
                    compare: 10,
                    common: 40,
                    specail: 20
                },
                {
                    name: "北京",
                    value: 540
                },
                {
                    name: "天津",
                    value: 130
                },
                {
                    name: "上海",
                    value: 400
                },
                {
                    name: "重庆",
                    value: 750
                },
                {
                    name: "河北",
                    value: 130
                },
                {
                    name: "河南",
                    value: 830
                },
                {
                    name: "云南",
                    value: 110
                },
                {
                    name: "辽宁",
                    value: 19
                },
                {
                    name: "黑龙江",
                    value: 150
                },
                {
                    name: "湖南",
                    value: 690
                },
                {
                    name: "安徽",
                    value: 60
                },
                {
                    name: "山东",
                    value: 39
                },
                {
                    name: "新疆",
                    value: 4
                },
                {
                    name: "江苏",
                    value: 31
                },
                {
                    name: "浙江",
                    value: 104
                },
                {
                    name: "江西",
                    value: 36
                },
                {
                    name: "湖北",
                    value: 52
                },
                {
                    name: "广西",
                    value: 33
                },
                {
                    name: "甘肃",
                    value: 7
                },
                {
                    name: "山西",
                    value: 5
                },
                {
                    name: "内蒙古",
                    value: 778
                },
                {
                    name: "陕西",
                    value: 22
                },
                {
                    name: "吉林",
                    value: 4
                },
                {
                    name: "福建",
                    value: 18
                },
                {
                    name: "贵州",
                    value: 5
                },
                {
                    name: "广东",
                    value: 98
                },
                {
                    name: "青海",
                    value: 1
                },
                {
                    name: "西藏",
                    value: 0
                },
                {
                    name: "四川",
                    value: 44
                },
                {
                    name: "宁夏",
                    value: 4
                },
                {
                    name: "海南",
                    value: 22
                },
                {
                    name: "台湾",
                    value: 3
                },
                {
                    name: "香港",
                    value: 5
                },
                {
                    name: "澳门",
                    value: 555
                }
                ]
            }]
        }
        let dom = document.getElementById("container");
        let myChart = echarts.init(dom);
        // console.log(data())
        setTimeout(() => {
            myChart.setOption(option, true)
        }, 500)
    </script>
</body>

</html>